$(function(){
	var
		oBanner = $('#bannerCarousel'),
		aSpan = $('#optiondian a'),
		aLi   = $('#imglunbo li'),
		oRightbtn = $('#btnright'),
		oLeftbtn  = $('#btnleft'),
		iIndex = 0,
		iTimer = null;
		
		
		oBanner.bind('mouseenter',function(){
			oLeftbtn.css({display:'block'});
			oRightbtn.css({display:'block'});
		});
		oBanner.bind('mouseleave',function(){
			oLeftbtn.css({display:'none'});
			oRightbtn.css({display:'none'});
		});
		
		//给鼠标添加进入事件
		aSpan.bind('mouseenter',function(){			
			//添加动画			
			if(!$(this).hasClass('diana')){
				iIndex = $(this).index();
				
				aLi.eq(iIndex).css({opacity:0}).addClass('active').stop(true).animate({
				opacity:1
			},300).siblings().animate({opacity:0},300,function(){
				$(this).removeClass('active')
			});
			
			
				$(this).addClass('diana').siblings().removeClass('diana')
			}
			
			//改变按钮的样式
			
		});
		
		
		//右边按钮单击事件
		oRightbtn.bind('click',function(){
			iIndex++;
			if(iIndex>5){
				iIndex = 0
			}
			
			aLi.eq(iIndex).css({opacity:0}).addClass('active').stop(true).animate({
				opacity:1
			},300).siblings().animate({opacity:0},300,function(){
				$(this).removeClass('active')
			});
			
			//改变按钮的样式
			aSpan.eq(iIndex).addClass('diana').siblings().removeClass('diana')
		});
		
		//左边按钮单击事件
		oLeftbtn.bind('click',function(){
			iIndex--;
			if(iIndex < 0){
				iIndex = 5
			}
			
			aLi.eq(iIndex).css({opacity:0}).addClass('active').stop(true).animate({
				opacity:1
			},300).siblings().animate({opacity:0},300,function(){
				$(this).removeClass('active')
			});
			
			//改变按钮的样式
			aSpan.eq(iIndex).addClass('diana').siblings().removeClass('diana')
		});
		
		
		//自动轮播
		iTimer = setInterval(function(){
				iIndex++;
				if(iIndex>5){
					iIndex = 0
				}
				
				aLi.eq(iIndex).css({opacity:0}).addClass('active').stop(true).animate({
					opacity:1
				},300).siblings().animate({opacity:0},300,function(){
					$(this).removeClass('active')
				});
			
			//改变按钮的样式
				aSpan.eq(iIndex).addClass('diana').siblings().removeClass('diana')
			},5000)
		
		
		//鼠标进入box的时候清除定时器
		oBanner.mouseenter(function(){
			clearInterval(iTimer);
		})
		
		//鼠标离开box的时候
		oBanner.mouseleave(function(){
			iTimer = setInterval(function(){
				iIndex++;
				if(iIndex>5){
					iIndex = 0
				}
				
				aLi.eq(iIndex).css({opacity:0}).addClass('active').stop(true).animate({
					opacity:1
				},300).siblings().animate({opacity:0},300,function(){
					$(this).removeClass('active')
				});
			
			//改变按钮的样式
				aSpan.eq(iIndex).addClass('diana').siblings().removeClass('diana')
			},5000)
		})
		
})

